<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <!--清除浮动 - 使用 clear-->
    <!--元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。-->
    <!--clear 属性指定元素两侧不能出现浮动元素。-->
    <!--使用 clear 属性往文本中添加图片廊：-->
    <style>
        .thumbnail
        {
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
        .text_line
        {
            clear: both;
            margin-bottom: 2px;
        }
    </style>
</head>
<body>
<h3>图形库</h3>
<p>试着调整窗口，看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="./image/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="./image/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="./image/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="./image/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="./image/klematis_small.jpg" width="107" height="90">
<img src="./image/klematis2_small.jpg" class="thumbnail" width="107" height="80">
<img src="./image/klematis3_small.jpg" class="thumbnail" width="116" height="90">
<img src="./image/klematis4_small.jpg" class="thumbnail" width="120" height="90">
</body>
</html>